
<template>
    <view class="">
       <robby-image-upload v-model="imageData" @delete="deleteImage" @add="addImage" :limit="9"></robby-image-upload>
        <view v-for="(item,index) in imageData" :key="index" class="">
            {{index}}. {{item}}
        </view>
		<uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps>
		<!-- <good-date-picker ref="goodDatePicker" @change="changeDate" :option="goodDatePickerOption"></good-date-picker> -->
    </view>
</template>
<script>

    import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	import uniSteps  from "@/components/uni-steps/uni-steps.vue"
	import GoodDatePicker from '@/components/good-date-picker/good-date-picker.vue';
	
	

	
    export default {
        data() {
            return { 
                limitNumber: 8,
                imageData : [],
                formData: {
                    userId: 2
                },
				goodDatePickerOption:{
				    chooseOneDate: "2019-12-07", //根据实际业务需求设置的默认单选日期，可为空,默认今天
				    initStartDate: '2019-12-07', //可选起始时间限制，可为空,默认今天
				    initEndDate: '2020-06-08', //可选结束时间限制，可为空,默认4个月后
				    isRange: false ,//是否开启范围选择，必填
					isShowSubmit:true
				}
				
            } 
        },
        components: {robbyImageUpload, uniSteps, GoodDatePicker},
        methods:{
            deleteImage: function(e){
                console.log(e)
            },
            addImage: function(res){ // 获得所择返回的图片路径数组
                console.log(res)
            },
			upLoadImg() {
				var remoteIndexStart = _self.imageList.length - imagePathArr.length
				
				var keyname = (_self.fileKeyName ? _self.fileKeyName : 'upload-images')
				var completeImages = 0
				
				for(let i=0; i<imagePathArr.length;i++){
					promiseWorkList.push(new Promise((resolve, reject)=>{
						let remoteUrlIndex = remoteIndexStart + i
						uni.uploadFile({
							url:_self.serverUrl,
							fileType: 'image',
							header: _self.header,
							formData:_self.formData,
							filePath: imagePathArr[i], 
							name: keyname,
							success: function(res){
								if(res.statusCode === 200){
									completeImages ++
									// 是否显示上传进度
									if(_self.showUploadProgress){
										uni.showToast({
											title: '上传进度：' + completeImages + '/' + imagePathArr.length,
											icon: 'none',
											mask: false,
											duration: 500
										});
									}
									console.log('上传图片成功: ' + res.data)
									resolve(res.data)
								}else{
									console.log('上传图片失败:'+res.data)
									reject('fail to upload image:' + remoteUrlIndex)
								}
							},
							fail: function(res){
								console.log('上传图片失败:'+res)
								reject('上传图片失败:' + remoteUrlIndex)
							}
						})
					}))
				}
				Promise.all(promiseWorkList).then((result)=>{
					for(let i=0; i<result.length;i++){
						_self.imageList.push(result[i])
					}
					_self.$emit('add', {
						currentImages: imagePathArr,
						allImages: _self.imageList
					})
					_self.$emit('input', _self.imageList)
				}).catch(err => {
					uni.showToast({
						title:'上传图片失败'
					})
					console.log(err);
				})
			},
				
			//日期选择
			changeDate(e) { //单选择完日期回调，
				this.currentDate=e.currentDate;//单选模式下返回当前选择的日期
				this.startDate=e.startDate;//区间选择模式下返回当前选择的开始日期
				this.endDate=e.endDate;//区间选择模式下返回当前选择的结束日期
				this.dateNum=e.dateNum;//区间选择模式下返回的开始于结束日期的天数
			},
			openDate() { //打开日期弹窗
				this.$refs.goodDatePicker.open();
			}

		}
    }
</script>
